<template>
  <div class="user-dashboard">
    <topAndbottom>
      <template #title>用例分析</template>
      <template #container>
        <div class="common-container">
          <div class="container-search">
            <el-form :model="searchParams" label-width="80px" :inline="true" size="default" @submit.native.prevent="">
              <el-form-item label="用例名称">
                <el-input v-model="searchParams.name" placeholder="请输入..." clearable @keyup.enter.native="serachBtn"
                  @clear="serachBtn" />
              </el-form-item>
              <el-form-item>
                <el-button :icon="Plus" type="success" @click="addBtn">新增</el-button>
              </el-form-item>
            </el-form>
          </div>
          <div class="container-table">
            <el-table v-loading="TestCaseTableDate.Loading" row-key="id" :height="TestCaseTableDate.height" :row-class-name="tableRowClassName"
              :data="TestCaseTableDate.list" style="width: 100%" default-expand-all>
              <el-table-column show-overflow-tooltip min-width="200" prop="testName" label="测试用例名称">
                <!-- <template #default="props">
                  <div>
                    <el-table :data="props.row.children">
                      <el-table-column label="测试名称" prop="testName" />
                      <el-table-column label="文件名" prop="fileName" />
                      <el-table-column label="创建时间" prop="createTime" />
                      <el-table-column label="更新时间" prop="updateTime" />
                    </el-table>
                  </div>
                </template> -->
              </el-table-column>
              <!-- <el-table-column show-overflow-tooltip min-width="200" prop="path" label="文件名称" align="center" /> -->
              <el-table-column show-overflow-tooltip min-width="200" prop="createTime" label="创建时间" align="center">
                <template #default="scope">
                  {{
                    global.$formatDateTime(scope.row.createTime)
                  }}
                </template>
              </el-table-column>
              <el-table-column show-overflow-tooltip min-width="200" prop="updateTime" label="更新时间" align="center">
                <template #default="scope">
                  {{
                    global.$formatDateTime(scope.row.updateTime)
                  }}
                </template>
              </el-table-column>
              <el-table-column show-overflow-tooltip min-width="200" prop="fileName" label="文件名称" align="center">
                <template #default="scope">
                  {{
                    scope.row.pid === '0' ? '' : scope.row.fileName
                  }}
                </template>
              </el-table-column>
              <el-table-column show-overflow-tooltip min-width="200" prop="router" label="备注" align="center" />
              <el-table-column label="操作" width="300" align="">
                <template #default="scope">
                  <el-button v-if="scope.row.pid == 0" size="" type="primary" @click="addBtn(scope.row)">添加子集</el-button>
                  <FileUpExport @fileUp="fileUp" v-if="scope.row.pid != 0 && !scope.row.fileName" ref="RefFileUp1"
                    :files="scope.row">
                  </FileUpExport>
                  <el-button type="primary" v-if="scope.row.pid !== '0' && scope.row.fileName" :icon="Edit"
                    @click="showBtn(scope.row)">预览</el-button>
                  <el-button type="primary" v-if="scope.row.pid !== '0' && scope.row.fileName" :icon="Edit"
                    @click="downLoadBtn(scope.row)">下载</el-button>
                  <el-button type="danger" :icon="Delete" @click="deleteBtns(scope.row.id)" style="margin-left: 10px;">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <!-- <div class="container-footer">
            <el-pagination v-model:current-page="searchParams.page" v-model:page-size="searchParams.size"
              :page-sizes="[5,10,20,50]"
              layout="total, sizes, prev, pager, next, jumper" :total="roleTableDate.total" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div> -->
        </div>
      </template>

    </topAndbottom>
    <addEdit ref="RefCaseAddEdit" @save="save" :childId="childId"></addEdit>
    <showFile ref="RefShowFile"></showFile>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted } from "vue";
import addEdit from './addTestCase.vue'
import { Search, Plus, Edit, Close, Delete } from '@element-plus/icons'
// 这个组件需要一步使用 怎么处理
import showFile from './modelVue/showFile.vue'
import roleTable from '@/composables/03organization/03role/roleTable'
import roleEdit from '@/composables/03organization/03role/roleEdit'
import menuTable from '@/composables/03organization/05testCase/caseTable'
import addTestCase from '@/composables/03organization/05testCase/caseAdd'
import { TestFileApi } from "@/api/test/test";
import modelTs from './modelTs/showModel'
import useInstance from "@/hooks/useInstance";
const { showBtn, RefShowFile, downLoadBtn } = modelTs()
const { searchParams, getRoleList, roleTableDate, handleCurrentChange, handleSizeChange, resetBtn, serachBtn } = roleTable()
const { RefRoleAddEdit } = roleEdit(searchParams, getRoleList, roleTableDate)
const { TestCaseTableDate, getTestCaseData,tableRowClassName } = menuTable()
const { global, proxy } = useInstance();
const { addBtn, save, RefCaseAddEdit, childId, deleteBtns } = addTestCase(getTestCaseData)
const RefFileUp1 = ref()
const fileUp = async (file, row) => {
  // console.log(row);
  if (file.length > 0 && row) {
    const formData = new FormData();
    formData.append('id', row.id);
    formData.append('wordFile', file[0]);
    const res = await TestFileApi(formData);
    if (res.code === 200) {
      global.$message({ message: '上传成功', type: 'success' })
      getTestCaseData()
      RefFileUp1.value?.clearFile()
    }
  }
};
</script>
<style scoped lang='scss'>
.user-dashboard {
  height: 100%;

  :deep(.el-form-item__label) {
    color: #fff;
  }

  .exportClass {
    margin-left: 20px;
  }
}</style>